<template>
  <div>
    <TopFilter
      :list="topFilterList"
      :cols="3"
      labelWidth="100"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>

    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn='false'
      :onColumnsChange="columns => this.columns = columns"
      columnsRef="potenCus_customer_customerinfo_index_01"
    />
    <Drawer
      :visible.sync="customerVisible"
      :title="dialogTitle"
      width="80%"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <div class="father">
        <div class="son">
          <el-button size="small" type="primary" v-if="this.handleType !='edit'"  @click="editClick">
            编辑
          </el-button>
        </div>
      </div>
          <!-- <multiuse-button size="small" type="primary" :click="editClick" :auth-list="auths" auth-mark="/api/cyxdms.clue/potenCus/updateCustomerView"> -->
          <!-- </multiuse-button> -->

      <customerModel :type="handleType" :consultList="consults" :rowData="formData" @close="closeHandler" />
    </Drawer>
  </div>
</template>
<script>

import { queryClueSourceList } from '@/api/potenCus/customer/potenCusManage';
import { queryCustomerViewList } from '@/api/potenCus/customer/customerinfo'
import { dictionary } from '@/utils/dictMixin';
import { getDataType } from '@/assets/js/auth';
import { authority } from '@/utils/authMixin';
import customerModel from './customerModel'
import moment from 'moment';

export default {
  name: 'customerinfo',
  mixins: [dictionary, authority],
  components: {
    customerModel
  },
  data () {
    return {
      dataType: getDataType('dataType'),
      topFilterList: this.createTopFilters(),
      fetchParams: {},
      fetchApi: queryCustomerViewList,
      columns: this.createTableColumns(),
      customerVisible: false,
      handleType: '',
      consults: [],
      formData: {},
      dialogTitle: ''
    }
  },
  methods: {
    createTopFilters () {
      return [
        {
          type: 'INPUT',
          label: '关键字',
          fieldName: 'keyWords',
          placeholder: '客户名称/手机号/客户编号'
        },
        {
          type: 'RANGE_DATE',
          label: '创建时间',
          fieldName: 'createdAtStart|createdAtEnd',
          dateType:'exactdaterange',
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'customerType',
          placeholder: '请选择',
          itemList: this.createDictList('1523')
        },
        {
          type: 'SELECT',
          label: '所属顾问',
          fieldName: 'consultant',
          placeholder: '请选择',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '潜客状态',
          fieldName: 'customerStatus',
          placeholder: '请选择',
          itemList: this.createDictList('7000')
        },
        // { //cms合代码 start 不要了
        //   type: 'SELECT',
        //   label: '客户等级',
        //   fieldName: 'level',
        //   placeholder: '请选择',
        //   itemList:this.createDictList('7049') ,
        // },
        // {
        //   type: 'SELECT',
        //   label: '休眠客户',
        //   fieldName: 'isDormant',
        //   placeholder: '请选择',
        //   itemList: [{value: 1,text:'是'}, {value: 0,text:'否'}]
        // }, //cms合代码  不要了 end
        {
          type: 'INPUT_TREE',
          label: '来源渠道',
          fieldName: 'clueSource',
          defaultExpandAll: true,
          placeholder: '请选择',
          itemList: []
        }
      ]
    },
    createTableColumns () {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 70,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <multiuse-button size="mini" type="text" onClick={() => this.showHandle(props.row)}>
                  明细
                </multiuse-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          width: 180,
          render: props => {
            return <span>{ props.row.createdAt ? moment(props.row.createdAt).format('YYYY-MM-DD HH:mm:ss'):props.row.createdAt }</span>;
          }
        },
        {
          title: '客户编号',
          dataIndex: 'potentialCustomerNo',
          width: 150,
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
        },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          filterItems: this.createDictList('1523'),
          render: props => {
            return <span> { this.preDictHandler(props.row.customerType, '1523')} </span>
          }
        },
        {
          title: '联系人姓名',
          dataIndex: 'contactName',
        },
        {
          title: '性别',
          dataIndex: 'gender',
          filterItems: this.createDictList('1002'),
          render: props => {
            return <span> { this.preDictHandler(props.row.gender, '1002')} </span>
          }
        },
        {
          title: '手机号码',
          dataIndex: 'mobilePhone',
        },
        {
          title: '所属顾问',
          dataIndex: 'consultantName',
        },
        {
          title: '来源渠道',
          dataIndex: 'clueSourceName',
        },
        {
          title: '潜客状态',
          dataIndex: 'clueStatus',
          filterItems: this.createDictList('7000'),
          render: props => {
            return <span> { this.preDictHandler(props.row.clueStatus, '7000')} </span>
          }
        },
        {
          title: '分配人',
          dataIndex: 'distributionConsultantName',
        },
        {
          title: '客户等级',
          dataIndex: 'level',
          filterItems: this.createDictList('7049'),
          render: props => {
            return <span>{this.createDictText(props.row.level, '7049')}</span>;
          }
        },
        {
          title: '休眠客户',
          dataIndex: 'isDormant',
          render: props => {
            return <span> { props.row.isDormant == 1 ? '是' : '否'} </span>
          }
        },
      ]
    },
    init () {
      let roleType = this.dataType === 'clue' ? '10061012':'10061012,10061015';
      this.getConsultant(1,roleType).then((result) => {
        // console.log('顾问列表:' , result);
        this.consults = [].concat(result);
        this.topFilterList.find(item=>item.fieldName==='consultant').itemList = result;
      })
    },
    // 潜客来源
    async getClueTree() {
      const res = await queryClueSourceList();
      console.log('潜客来源', res)
      let treeList = res.data
      treeList.forEach(el => (el.text = el.clueName));
      treeList.forEach(el => (el.value = el.id));
      treeList.forEach(el => (el.parentId = el.parentId));

      this.topFilterList.find(item => item.fieldName ==='clueSource').itemList = treeList
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    showHandle (row) {
      console.log('明细', row)
      this.handleType = 'show';
      this.customerVisible = true
      this.formData = row
      this.dialogTitle = `基本信息 编号(${row['potentialCustomerNo']})`
    },
    // 明细编辑
    editClick(){
      this.customerVisible = false;
      console.log('叫你一声 你敢答应么')
      this.handleType = 'edit';
      this.start()
    },
    showVisible(){
      this.customerVisible = true;
    },
    start: function () {
      setTimeout(() => {
        this.showVisible()
      }, 500);
    },
    closeHandler (val) {
      this.customerVisible = false
      if (val == 'refresh') {
        this.fetchParams = Object.assign({}, this.fetchParams);
      }
    },
    // 字典数据使用前预处理
    preDictHandler(val, code){
      let resultText = val && String.prototype.includes.call(val, code) ? this.createDictText(val, code) : val;
      return resultText;
    },
  },
  created () {
    this.init()
    this.getClueTree()
  },
  mounted () {
    this.BaseTable = this.$refs.table.$refs.pageTable
  }
}
</script>

<style lang="less" scoped>
.father{
  width: 380px;
  height: auto;
  position: relative;
  float: right;
}
.son{
  position: absolute;
  top: -55px;
  right: 30px;
  z-index: 10;
}

</style>
